<template>
  <div id="outer">
    <p>最外层组件</p>
    <input v-model="valueOuter" @change="changeValue()" type="text">
    <busBrothers></busBrothers>
    <busMiddle></busMiddle>

  </div>
</template>
<script>
import busMiddle from "./middle";
import busBrothers from "./brothers";
import bus from "./bus.js";
export default {
  name: "outer",
  components: {
    busMiddle,
    busBrothers
  },
  data() {
    return {
      valueOuter: ""
    };
  },
  methods: {
    changeValue() {
      bus.$emit("value", this.valueOuter);
    }
  },
  beforeCreate() {
    console.log(bus);

    //为了尽快收到消息，写在钩子函数最开始
    bus.$on("value", e => {
      this.valueOuter = e;
      console.log("最外层组件接收到值");
    });
  },
  beforeDestroy() {
    bus.$off();
  }
};
</script>
<style scoped>
</style>